<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="<s:url value="/css/style.css"/>" rel="stylesheet"
			type="text/css" />
		<link href="<s:url value="/css/jquery.css"/>" rel="stylesheet"
			type="text/css" />
		<script type="text/javascript" src="<s:url value="/js/jquery.js"/>"></script>
		<script type="text/javascript" src="<s:url value="/js/jquery-ui.js"/>"></script>
		<script type="text/javascript" src="<s:url value="/js/common.js"/>"></script>
		<script type='text/javascript'
			src="<s:url value="/js/autocomplete/jquery.bgiframe.min.js"/>"></script>
		<script type='text/javascript'
			src="<s:url value="/js/autocomplete/jquery.ajaxQueue.js"/>"></script>
		<script type='text/javascript'
			src="<s:url value="/js/autocomplete/thickbox-compressed.js"/>"></script>
		<script type='text/javascript'
			src="<s:url value="/js/autocomplete/jquery.autocomplete.js"/>"></script>
		<link rel="stylesheet" type="text/css"
			href="<s:url value="/js/autocomplete/jquery.autocomplete.css"/>" />
		<script type="text/javascript" src="<s:url value="/js/jquery-ui.js"/>"></script>
		<link rel="stylesheet" type="text/css"
			href="<s:url value="/js/autocomplete/thickbox.css"/>" />
		<script type="text/javascript"
			src="<s:url value="/js/jquery.blockUI.js"/>"></script>
		<script type="text/javascript" src="<s:url value="/js/jquery.validate.js"/>"></script>
		<script type="text/javascript">
        function doSelectClassType() {
			$("#classTypeList option:selected").each( function() {
			    if ($(this).val()==-1){
			        return;
			    }
				$("#classTypename").val($(this).text());
				$("#classTypeId").val($(this).val());
			});
	    }
	    function doAddClassUnit() {
			   	var v = $("#upperLimit").val();
			  	var name = $("#classTypename").val();
				var reg = new RegExp("^[0-9]+(.[0-9]{2})?$", "g");
				if (!name||!reg.test(v)) {
					alert("please input upper limit");
					return;
				}
				$('#classUnitTable').append("<tr id='"+$("#classTypeId").val()+"'></tr>");
				$("#classUnitTable")
						.find("tr:last")
						.append(
								"<td class=\"tablecolour2\">"
										+ $("#classTypename").val()
										+ "</td><td title='limit' class=\"tablecolour2\">"
										+ $("#upperLimit").val()
										+ "</td><td class=\"tablecolour2\"  style=\"cursor:pointer\""
										+ "  onclick=\"doDeletClassType('"
										+ $("#classTypeId").val() + "','"+ $("#classTypename").val() +"');\">Del</td>");
				$("#classTypeList option:selected").remove();
				$("#classTypeId").val("");
				$("#classTypename").val("");
				$("#upperLimit").val("");
	    }
		function doDeletClassType(clsId,clsName){
			   var toption="<option value='"+clsId+"'>"+clsName+"</option>";
			   $("#classTypeList").append(toption); 
			   $("#"+clsId).remove();
		}
	   $(function(){
			$('#startTime').datepicker({dateFormat:'yy-mm-dd',
			             changeMonth: true,
			             changeYear: true});
			$('#endTime').datepicker({dateFormat:'yy-mm-dd',
			             changeMonth: true,
			             changeYear: true});
			$('#paidDepositTime').datepicker(
			         {   dateFormat:'yy-mm-dd'});
			if($.trim($('#result').text())!=''){
				popupDiv('pop-div');
			};
			 $('#editForm').validate();
			 $("#selstudent").autocomplete("<s:url value="/customer/Leads/autoCompleteAjaxByCC.action"/>", {
		              width: 300,
		              minChars:2, //几个字
		              mastMatch:true,
		              selectFirst: false,
		              max:  20,
		           	  formatItem: function(row, i, max) {
		           	      //alert(row);
		           	      var d=eval("("+row+")");
		           	      //alert(d);
					      return  d.name+ " "  + d.tel;
			         },
				     formatMatch: function(row, i, max) {
				         var d=eval("("+row+")");
		 			     return  d.name+ " " + d.tel;
				     },
				     formatResult: function(row) {
				        // alert(row);
				         var d=eval("("+row+")");
					     return d.name+ " [TEL:" + d.tel+"]";
		     	      }
		     });
		     $("#selstudent").result(function(event, data, formatted) {
		           var d=eval("("+data+")");
				   $("#selstudentid").val(d.id);
				   $("#paidDeposit").val(d.deposit);
				   $("#paidDepositTime").val(d.depositTime);
		     });
		     $("#giftsTd :checkbox").each( function(i) {
		            if (i!=0&&i%3==0){
		 		       $("<br/>").insertBefore($(this));
		 		    }
		     });
			 $("#materialsTd :checkbox").each( function(i) {
			          if (i!=0&&i%3==0){
		 		        $("<br/>").insertBefore($(this));
		 		      }
		 	  });
		 	  $("#selCourse").change(function(){
		                  var  selCourse=$("#selCourse option:selected").val();
		                  if (!selCourse){
		                    return ;
		                  }
		                  $.blockUI({ css: { 
		                    border: 'none', 
		                    padding: '15px', 
		                    backgroundColor: '#000', 
		                    '-webkit-border-radius': '10px', 
		                    '-moz-border-radius': '10px', 
		                    opacity: .5, 
		                    color: '#fff' 
		                  }}); 
		                  var curdate=$('#curDate').attr('value');
		                  var url = "<s:url value="/data/Course/selectCourseAjax.action"/>";
		                  var params = {
		                      id:selCourse
		                  };
		                  jQuery.post(url, params, callbackFun);
		             });	
		});
	    function callbackFun(data)
	      {
	             setTimeout($.unblockUI, 500); 
	             $("#classTypeId").val("");
			     $("#classTypename").val("");
			     $("#upperLimit").val("");
	             $('#classTypeList').empty()
	                 .append('<option value="">--- Please Select ---</option>')
	                 .find('option:first')
	                 .attr("selected","selected");
	              $(data).find('response>classtype').each(function(){
	                  var d=eval("("+$(this).text()+")"); 
	                  var toption="<option value='"+d.id+"'>"+d.name+"</option>";
	                  $('#classTypeList').append(toption);
	       　　　　　　 });
	              $('#classUnitTable').find("tr:gt(0)").remove();
	              $(data).find('response>classunit').each(function(){
	                  var d=eval("("+$(this).text()+")"); 
	                  $('#classUnitTable').append("<tr id='"+d.id+"'></tr>");
		              $("#classUnitTable")
					  .find("tr:last")
					  .append(
							"<td class=\"tablecolour2\">"
									+ d.name
									+ "</td><td title='limit' class=\"tablecolour2\">"
									+ d.limit
									+ "</td><td class=\"tablecolour2\"  style=\"cursor:pointer\""
									+ "  onclick=\"doDeletClassType('"
									+ d.id + "','"+ d.name +"');\">Del</td>");
	       　　　　　　 });
	　　　      };
		function doSave() {
		        var selid=$("#selstudentid").val();
		        if (!selid){
		            alert("please select one leads");
		            return;
		        }
			    var custr="";
		        $("#classUnitTable tr[id]").each( function() {
				    custr=custr+($(this).attr("id"))+","
				    +($(this).find("td[title='limit']").html())+";";
				});
				$("#classUnitString").val(custr);
		        $('#editForm').submit();
	    };
	    function doCommit() {
	            var custr="";
		        $("#classUnitTable tr[id]").each( function() {
				    custr=custr+($(this).attr("id"))+","
				    +($(this).find("td[title='limit']").html())+";";
				});
				$("#classUnitString").val(custr);
	            var selid=$("#selstudentid").val();
		        if (!selid){
		            alert("please full the leads before commit");
		            return;
		        }else if (!custr){
		            alert("please full class info before commit");
		            return;
		        }else if (!$("#contractNo").val()){
		            alert("please full contractNo before commit");
		            return;
		        }else if (!$("#price").val()){
		            alert("please full price before commit");
		            return;
		        }else if (!$("#startTime").val()){
		            alert("please full startTime before commit");
		            return;
		        }else if (!$("#endTime").val()){
		            alert("please full endTime before commit");
		            return;
		        }else {
		           if (!confirm("after commit you can't change everything,confirm!")){
		              return;
		           }
		        }
		        var form = $('#editForm');
 		        form.attr('action',form.attr('action').replace('save','commit'));
		        $('#editForm').submit();
	    };
		function goBack(){
			location.href='<s:url value="/contract/Contract/list"/>';
		};
</script>
<s:head/>
		<title><s:text name="system.title" /></title>
	</head>
	<body>
		<s:include value="/common/up.jsp"></s:include>
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td class="box">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td id="tag-over">
								<span id="tag-over">Contract</span>
							</td>
							<td class="tab3-line" width="90%">
								&nbsp;
							</td>
						</tr>
					</table>
					<s:form action="Contract/save" namespace="/contract" method="post"
						id="editForm" name="editForm">
						<s:hidden name="id"></s:hidden>
						<table width="100%" border="0" cellpadding="3" cellspacing="1"
							class="margin">
							<tr>
								<td align="right" class="tablecolour5">
									Name:
								</td>
								<td class="tablecolour5" colspan="5">
									<s:if test="selLeadsId!=null">
										<input id="selstudent" size="50" type="text"
											readonly='readonly'  disabled="disabled"
											value="<s:property value="getSelLeadsInfo()"/>" class="input2" />
										<s:hidden id="selstudentid" name="selLeadsId" />
									</s:if>
									<s:else>
										<input id="selstudent" size="50" type="text"
										   value="<s:property value="getSelLeadsInfo()"/>" class="input2" />
										<s:hidden id="selstudentid" name="selLeadsId" />
									</s:else>
									VIP
									<s:checkbox name="isVip" cssClass="input2" />
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Paid Deposit:
								</td>
								<td class="tablecolour5">
									<s:textfield id="paidDeposit" cssClass="input2 number" name="paidDeposit" />元
								</td>
								<td align="right" class="tablecolour5">
									Paid Time:
								</td>
								<td class="tablecolour5">
									<s:date name="paidDepositTime" format="yyyy-MM-dd" 
										var="paidDepositTimefmt" />
									<s:textfield name="paidDepositTime" cssClass="input2" id="paidDepositTime"  
										value="%{paidDepositTimefmt}" />
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Contract No:
								</td>
								<td class="tablecolour5">
									<s:textfield id="contractNo"  name="contractNo" cssClass="input2" />
								</td>
								<td align="right" class="tablecolour5">
									Price:
								</td>
								<td class="tablecolour5">
									<s:textfield name="price" id="price"  cssClass="number"  />
									
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Begin:
								</td>
								<td class="tablecolour5">
									<s:date name="startTime" format="yyyy-MM-dd" var="startTimefmt" />
									<s:textfield name="startTime" id="startTime"  cssClass="input2 required"
										value="%{startTimefmt}" />
								</td>
								<td align="right" class="tablecolour5">
									End:
								</td>
								<td class="tablecolour5">
									<s:date name="endTime" format="yyyy-MM-dd" var="endTimefmt" />
									<s:textfield name="endTime" id="endTime" value="%{endTimefmt}"  cssClass="input2 required" />
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									User Name:
								</td>
								<td class="tablecolour5">
									<s:textfield name="userName" cssClass="input2" />
								</td>
								<td align="right" class="tablecolour5">
									Begin Level:
								</td>
								<td class="tablecolour5">
									<s:select name="selBeginLevelId" list="beginLevelList" cssClass="input2 required"
										headerKey="" headerValue="--select--" />
								</td>
							</tr>
							<tr>
								<!--  td align="right" class="tablecolour5">
									Card:
								</td>
								<td class="tablecolour5">
									<s:textfield name="card" cssClass="input2"/>
								</td -->
								<td align="right" class="tablecolour5">
									Elite Card:
								</td>
								<td class="tablecolour5" colspan="3">
									<s:textfield name="eliteCard"  cssClass="input2 required" />
								</td>
							</tr>
							<tr>
							<td align="right" class="tablecolour5">
									Course Name:
								</td>
								<td class="tablecolour5">
									<s:select id="selCourse"  cssClass="input2 required" name="selCourseId" list="courseList"
										headerKey="" headerValue="--select--" />
								</td>
								<td align="right" class="tablecolour5">
								Payment Method:</td><td class="tablecolour5">
									<s:select name="payMethod" headerKey=""  cssClass="input2 required"
										headerValue="--select--" listKey="name()"
										list="@com.ef.constant.EPayMethod@values()" /></td>
							</tr>
							<tr>
								
								<td class="tablecolour5" colspan='4'>
									<table width="100%" border="0">
										<tr>
											<td align="center" class="tablecolour5">
												<s:updownselect list="optionalClassTypeList"
													id="classTypeList" name="optionalClassType" headerKey="-1"
													headerValue="--- Please Select ---" listKey="id"
													listValue="name" emptyOption="false" allowMoveDown="false"
													allowMoveUp="false" cssStyle="WIDTH: 200px; HEIGHT: 150px"
													allowSelectAll="false" onclick="doSelectClassType();" />
											</td>
											<td align="center" class="tablecolour5" valign="top">
												<table>
													<tr>
														<td>
															Select ClassType:
														 
															<input type="text" id="classTypename" size="15" class="input2">
															<input type="hidden" id="classTypeId" size="20" class="input2">
														</td>
													 
														<td>
															Upper Limit:
														 
															<input type="text" id="upperLimit" size="15" class="input2">
														</td>
													 
														<td>
															<input type="hidden" id="classUnitString"
																name="classUnitString">
															<img onclick="javascript:doAddClassUnit();"
															src="<s:url value="/img/right/Add.gif"/>" border="0"
																align="absmiddle" />
														</td>
													</tr>
												</table>
											</td>
											<td class="tablecolour5" valign="top">
												<table id="classUnitTable" align="center" width="100%"
													border="0" cellpadding="0" cellspacing="1" class="box2">
													<tr>
														<td class="tablecolour1">
															ClassType
														</td>
														<td class="tablecolour1">
															Limit
														</td>
														<td class="tablecolour1">
															Function
														</td>
													</tr>
													<s:iterator value="selectClassUnitList" status="status">
														<tr id="<s:property value="classType.id" />">
															<td class="tablecolour2">
																<s:property value="classType.name" />
															</td>
															<td title="limit" class="tablecolour2">
																<s:property value="updateLimitTimes" />
															</td>
															<td class="tablecolour2" style="cursor: pointer"
																onclick="doDeletClassType(<s:property value="classType.id" />,
															 '<s:property value="classType.name" />');">
																Del
															</td>
														</tr>
													</s:iterator>
												</table>
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Promotion Item:
								</td>
								<td id="giftsTd" class="tablecolour5" colspan="3">
									<s:checkboxlist id="gifts" name="selgifts" list="allGifts"
										listKey="key" listValue="value" value="selectedGifts">
									</s:checkboxlist>
								</td>
								<!--td align="right" class="tablecolour5">
									Material:
								</td>
								<td id="materialsTd" class="tablecolour5">
									<s:checkboxlist id="materials" name="selmaterials"
										list="allMaterials" listKey="key" listValue="value"
										value="selectedMaterials">
									</s:checkboxlist>
								</td-->
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Free F2F:
								</td>
								<td class="tablecolour5" colspan='3'>
									<s:textfield name="freeF2FTimes" />
								</td>
							</tr>
							<tr>
								<td align="right" class="tablecolour5">
									Comment:
								</td>
								<td class="tablecolour5" colspan='3'>
									<s:textarea cols="40" rows="4" name="comments" />
								</td>

							</tr>
							<tr>
								<td align="center" colspan="4" height="50" class="tablecolour5">
									<input type="button" class="btn1" value="Save"
										onclick="doSave();" />
									<s:if test="%{#session._current_user.role.name!='CC'}">	 
									<input type="button" class="btn1" value="Commit"
										onclick="doCommit();" />
										</s:if>
									<input name="goback" type="button" class="btn1" value="Go Back"
										onclick="goBack()" />
								</td>
							</tr>
						</table>
					</s:form>
				</td>
			</tr>
		</table>
		<s:include value="/common/down.jsp"></s:include>
		<div id='pop-div' style="width: 300px;" class="pop-box">
			<s:include value="/common/confirm.jsp"></s:include>
		</div>

	</body>
</html>